<!--  -->
<template>
	<a-tooltip :disabled="disabledTip">
		<div
			:class="{
				'lsh-tool-btn': true,
				active: active,
				disabled: disabled
			}"
		>
			<SvgIcon class="lsh-icon" :name="name" />
			<slot v-if="hasText">
				<span>{{ tipText }}</span>
			</slot>
		</div>
		<template #content>
			<div class="lsh-tip-box">
				<div class="lsh-tip-content" v-for="item in tipTagList">
					{{ item.text }}
					<span class="lsh-tag-item" v-for="tagItem in item.tagList">{{
						tagItem
					}}</span>
				</div>
			</div>
		</template>
	</a-tooltip>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/svg-icon/index.vue'
const props = withDefaults(
	defineProps<{
		name: string
		active?: boolean
		tipText?: string
		disabled?: boolean
		showTip?: boolean
		hasText?: boolean
		tipTagList?: { text: string; tagList?: string[] }[]
	}>(),
	{
		showTip: true,
		hasText: true,
		tipTagList: () => []
	}
)
const disabledTip = computed(() => {
	return !props.tipTagList?.length || !props.showTip
})
</script>
<style scoped lang="less">
.lsh-tool-btn {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 12px;
	width: 50px;
	height: 50px;
	font-family: 'PingFang SC';
	font-size: 12px;
	font-weight: 400;
	user-select: none;
	color: rgba(121, 130, 143, 1);
	.lsh-icon {
		font-size: 16px;
		color: rgba(13, 16, 20, 1);
	}
	&.active {
		color: rgba(0, 101, 255, 1);
		background: rgba(0, 101, 255, 0.08);
		.lsh-icon {
			color: rgba(0, 101, 255, 1);
		}
	}
	&.disabled {
		color: rgba(201, 206, 214, 1);
		cursor: not-allowed;
		.lsh-icon {
			color: rgba(201, 206, 214, 1);
		}
	}
	&:not(.active):not(.disabled):hover {
		background: rgba(237, 241, 247, 1);
	}
}
</style>
<style lang="less">
.lsh-tip-box {
	display: flex;
	align-items: center;
  gap: 16px;
	.lsh-tip-content {
		display: flex;
		align-items: center;
		gap: 8px;
    position: relative;
    &:nth-child(n+2)::before{
      content: "";
      position: absolute;
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, 0.20);
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
    }
		.lsh-tag-item {
			border-radius: 4px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			background: rgba(255, 255, 255, 0.1);
			padding: 1px 4px;
			color: #fff;
			font-size: 14px;
			font-weight: 400;
			height: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
